<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<!--
作用域插槽：
    在子组件中定义的属性，只作用在 子组件的模板定义上面使用
-->

<div id="app">
    <!--  这里的 isShow 是来自于 app 上面的属性   -->
    <lk-box v-show="isShow"></lk-box>
</div>

<template id="box">
    <div style="width: 500px; height: 300px; background-color: #846f74; border-radius: 4px; margin-top: 20px">
        <button v-show="isShow">按钮</button>
    </div>
</template>

</body>
<script src="js/vue.js"></script>
<script>

    const lkBox = {
        data() {
            return {
                "isShow": false
            };
        },
        template: `#box`,   // 这里必须要使用 `` 符号作为字符串
        methods: {
            btnCallback() {
                console.log("box 中 button 调用");
            }
        }
    };

    const app = Vue.createApp({
        data() {
            return {
                "isShow": true
            }
        },
        components: {
            "lk-box": lkBox
        }
    }).mount("#app");
</script>
</html>
